
<div class="container-fluid container-cards-pf" ng-controller="hwk.eventsController">

  <!-- TOAST NOTIFICATIONS -->

  <pf-notification-list></pf-notification-list>

  <div class="row row-cards-pf" ng-hide="selectedTenant == null || selectedTenant == ''">

    <!-- Toolbar Datetime Range-->

    <div class="row toolbar-pf" ng-hide="selectedTenant == null || selectedTenant == ''">
      <div class="col-md-12">
        <form class="toolbar-pf-actions">
          <div class="btn-group toolbar-pf-filter pull-left" ng-style="{'width':'275px'}">
            <button type="button" class="btn btn-default" ng-click="updateRange('30m')">30m</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('1h')">1h</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('4h')">4h</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('8h')">8h</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('12h')">12h</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('1d')">1d</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('7d')">7d</button>
            <button type="button" class="btn btn-default" ng-click="updateRange('30d')">30d</button>
          </div>
          <div class="btn-group toolbar-pf-filter pull-left" ng-style="{'width':'100px'}">
            <button type="button" class="btn btn-default" ng-click="updateFilter()">Set Range To:</button>
          </div>
          <div class="form-group toolbar-pf-filter" ng-style="{'width':'100px', 'padding-right':'0px'}">
            <div class="input-group input-touchspin">
              <input class="bootstrap-touchspin" type="text" id="offset" ng-model="filter.range.offset" />
            </div>
          </div>
          <div class="form-group toolbar-pf-filter" ng-style="{'width':'75px', 'padding-right':'0px'}">
            <div class="input-group" >
              <select class="btn btn-default form-control" id="filter.range.unit" ng-options="opt as opt for opt in filter.range.unitOptions" ng-model="filter.range.unit"></select>
            </div>
          </div>
          <div class="form-group toolbar-pf-filter" ng-style="{'width':'75px', 'padding-right':'0px'}">
            <div class="input-group">
              <select class="btn btn-default form-control" id="filter.range.direction" ng-options="opt as opt for opt in filter.range.directionOptions" ng-model="filter.range.direction"></select>
            </div>
          </div>
          <div class="form-group toolbar-pf-filter" ng-style="{'width':'220px'}">
            <div class='input-group date' id="datetime" >
              <input type='text' class="form-control" ng-model="filter.range.datetime" id="currentdatetime" name="currentdatetime"/>
               <div class="input-group-addon btn btn-default">
                 <span class="fa fa-calendar"></span>
               </div>
             </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Toolbar Filters-->

    <div class="row toolbar-pf" id="toolbar">
      <div class="col-md-12">
        <form class="toolbar-pf-actions" ng-submit="updateFilter()">
          <div class="form-group toolbar-pf-filter" ng-style="{'width':'40%'}">
            <div class="input-group">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Tag Query <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="selected"><a href="#/events">Tag Query</a></li>
                </ul>
              </div>
              <input type="text" class="form-control" ng-model="filter.event.tagQuery" id="filter.event.tagQuery" placeholder="Filter By Tag Query..." />
            </div>
          </div>
          <div class="form-group">
            <div class="dropdown btn-group  dropdown-kebab-pf">
              <button class="btn btn-link dropdown-toggle" type="button" id="eventsKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span class="fa fa-ellipsis-v"></span>
              </button>
              <ul class="dropdown-menu " aria-labelledby="alertsKebab">
                <li ng-click="deleteSelected()"><a>Delete Selected (TD?)</a></li>
              </ul>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- List of rows -->

    <div class="list-group list-view-pf list-view-pf-view">

      <!-- Full Row details-->

      <div class="list-group-item" ng-repeat="eventItem in eventsList" repeat-done>

        <!-- Action column found on the right of each row -->

        <div class="list-view-pf-checkbox">
          <input type="checkbox" />
        </div>
        <div class="list-view-pf-actions">
          <div class="dropdown pull-right dropdown-kebab-pf">
            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span class="fa fa-ellipsis-v"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight1">
              <li ng-click="viewEvent(eventItem)"><a>View</a></li>
              <li ng-click="deleteEvent(eventItem.id)"><a>Delete</a></li>
            </ul>
          </div>
        </div>

        <!-- Main Row -->

        <div class="list-view-pf-main-info">

          <!-- Alert type icon (open/ack/resolved/event) -->
          <div class="list-view-pf-left">
            <span class="pficon pficon-topology"></span> <!-- event -->
          </div>

          <div class="list-view-pf-body">

            <div class="list-view-pf-description">
              <!-- Event category -->
              <div class="list-group-item-heading">{{ eventItem.category }}</div>
              <!-- Text description - a brief summary -->
              <div class="list-group-item-text">{{ eventItem.ctime | date:'yyyy-MM-dd HH:mm:ss Z' }}</div>
            </div>

            <!-- Expandable sections -->

            <div class="list-view-pf-additional-info">

              <!-- Details -->
              <div class="list-view-pf-additional-info-item">
                <div class="list-view-pf-expand">
                  <span class="fa fa-angle-right"></span> <span class="pficon pficon-info"></span> Details
                </div>
              </div>

              <!-- Tags -->
              <div class="list-view-pf-additional-info-item">
                <div class="list-view-pf-expand">
                  <span class="fa fa-angle-right"></span> <span class="pficon pficon-repository"></span> <strong>{{ eventItem.tags ? eventItem.tags.length : 0 }}</strong> Tags
                </div>
              </div>

            </div>
          </div>
        </div>

        <!-- The expanded sections -->

        <!-- Details -->
        <div class="list-group-item-container container-fluid hidden">
          <div class="close">
            <span class="pficon pficon-close"></span>
          </div>

          <!-- category and main alert details -->
          <div class="row">
            <div class="col-md-12">
              <p>
                <b>Data ID:</b> {{ eventItem.dataId }} <br /> <b>Event Text:</b> {{ eventItem.text }}
              </p>
            </div>
          </div>
        </div>

        <!-- Tags -->
        <div class="list-group-item-container container-fluid hidden">
          <div class="close">
            <span class="pficon pficon-close"></span>
          </div>
          <div class="row">
            <div class="col-md-12">
              <dl class="dl-horizontal">
                <dt ng-repeat-start="tag in eventItem.tags">{{tag.key}}:</dt>
                <dd ng-repeat-end>{{tag.value}}</dd>
              </dl>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- small screen content when no tenant is entered -->

  <div class="row row-cards-pf" ng-show="selectedTenant == null || selectedTenant == ''">
    <div class="col-md-12">
      <div class="card-pf">
        <div class="card-pf-heading">
          <p class="card-pf-heading-details"></p>
          <h2 class="card-pf-title">Select a Tenant</h2>
        </div>
        <div class="card-pf-body">Use the upper right form to select a tenant which fetch data from Hawkular Alerting.</div>
      </div>
    </div>
  </div>

</div>

<script type="text/ng-template" id="jsonModal.html">
  <div class="modal-content modal-lg">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" ng-click="cancel()" aria-hidden="true">
        <span class="pficon pficon-close"></span>
      </button>
      <h4 class="modal-title">{{ jsonModal.title }}</h4>
    </div>
    <div class="modal-body">
      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-md-12">
            <textarea class="form-control textarea-resize" ng-model="jsonModal.json" ng-readonly="{{ jsonModal.readOnly }}" rows="20" placeholder="{{ jsonModal.placeholder }}" />
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" ng-show="{{ !jsonModal.readOnly }}" ng-disabled="!isValid()" ng-click="save()">Save</button>
    </div>
  </div>
</script>

<script>
  $('#offset').TouchSpin({
    initval: 1
  });
  $('#datetime').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    showTodayButton: true,
    showClose: true,
    icons: {
      date: 'fa fa-calendar',
      time: 'fa fa-clock-o',
      up: 'fa fa-arrow-up',
      down: 'fa fa-arrow-down',
      previous: 'fa fa-arrow-left',
      next: 'fa fa-arrow-right',
      today: 'pficon pficon-home',
      close: 'fa fa-close'
    },
    tooltips: {
      today: 'Reset to Now',
    }
  });
</script>